<template>
  <div>
    <el-select
      v-model="internalValue"
      filterable
      clearable
      placeholder="请选择"
      @change="handleChange"
    >
      <el-option
        v-for="subsidy in subsidies"
        :key="subsidy.id"
        :label="subsidy.subsidy_name"
        :value="subsidy.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getsubsidys } from '@/api/subsidytemplate.js'
export default {
  props: {
    value: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      subsidies: [],
      internalValue: this.value // 使用内部值来响应 v-model
    }
  },
  watch: {
    value(val) {
      // 当父组件更新 v-model 时，同步内部值
      this.internalValue = val
    }
  },
  mounted() {
    this.fetchSubsidies()
  },
  methods: {
    async fetchSubsidies() {
      try {
        const res = await getsubsidys()
        console.log('电表补助', res)
        this.subsidies = res.data.subsidy
        // 如果没有传入默认值，则尝试设置第一个补贴为默认值
        if (this.value === null && this.subsidies.length > 0) {
          this.internalValue = this.subsidies[0].id
          this.$emit('input', this.internalValue) // 更新父组件的 v-model
        }
      } catch (err) {
        console.error(err)
      }
    },
    handleChange(value) {
      this.$emit('input', value) // 触发自定义的 input 事件来更新 v-model
    }
  }
}
</script>

<style scoped>
/* 添加任何你需要的样式 */
</style>
